<template>
  <div class="h-screen relative">
    <div class="h-[315px] bg-[#256de5] relative flex flex-col justify-center items-center login-logo">
      <div class="h-[92px] w-[92px] rounded-full bg-[#4e88ea] flex justify-center items-center">
        <img src="@/assets/logo.png" class="w-[85px] h-[85px] rounded-full" />
      </div>
      <h1 class="text-base mt-3 text-[#fff] font-semibold">魏州街道办</h1>
    </div>
    <div class="px-5 mt-5 login-container text-center">
      <van-form class="form" @submit="handleSubmit">
        <div class="h-[140px]">
          <van-field
            v-model="phone"
            type="tel"
            name="phone"
            maxlength="11"
            clearable
            placeholder="手机号码"
            :rules="[{ required: true, message: '请输入手机号码' }]"
            class="text-base"
          />
          <van-field
            v-model="code"
            type="password"
            name="code"
            maxlength="20"
            clearable
            placeholder="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
            class="text-base"
          />
        </div>
        <div class="mt-10">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- <div class="absolute bottom-5 w-full px-5">
      <van-divider>第三方平台登录</van-divider>
      <div class="flex justify-center items-center">
        <a>
          <img src="@/assets/login/wechart.png" class="h-12 w-12" />
        </a>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useLoginEffect } from './hooks/useLoginEffect'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Login',
  setup() {
    const {
      phone,
      code,
      loading,
      handleSubmit 
    } = useLoginEffect()
    const router = useRouter()

    const handleGoHome = () => {
      router.push({ path: '/home' })
    }

    return {
      phone,
      code,
      loading,
      handleGoHome,
      handleSubmit 
    }
  }
})
</script>
<style lang="scss">
.login{
  &-logo{
    &::before, &::after {
      content: '';
      height: 28px;
      width: 100%;
      left: 0;
      bottom: -1px;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
    }
    &::before{
      background-image: url('../../assets/login/wave1.png')
    }
    &::after{
      background-image: url('../../assets/login/wave2.png')
    }
  }
  &-container{
    .van-cell{
      .van-field__control{
        height: 32px;
        line-height: 32px;
      }
      .van-field__left-icon .van-icon{
        padding-right: 10px;
      }
    }
    .input-box{
      &:after{
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: var(--van-padding-md);
        bottom: 0;
        left: var(--van-padding-md);
        border-bottom: 1px solid var(--van-cell-border-color);
        transform: scaleY(.5);
      }
    }
  }
}
</style>
